/*防抖函数原理：在事件被触发n秒后在执行回调函数，如果n秒内又被触发，则重新计时。
 适用场景：
 ①按钮提交场景：防止多次提交按钮，只执行最后提交的一次
 ②服务端验证场景，表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似。
*/
// 手写简化版实现
export const debounce = (fn, delay) => {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this,args);
        }, delay)
    }
}
// 这边注意如果是外部文件导入方法，return的时候不要使用箭头函数，会导致this指向外部文件，而不是指向当前文件，
// 比如在vue中使用，应改成return function(...args){...} 这样return里面的this就指向了vue实例，下面亦是如此

/*节流函数原理：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次失效，防抖是延迟执行，而节流是间隔执行，
 函数节流即每隔一段时间就执行一次。
 适用场景：
 ①拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
 ②缩放场景：监控浏览器resize
 ③动画场景：避免短时间内多次触发动画引起性能问题
 */
// 手写简化版实现
//①定时器实现
export const throttle = (fn, delay = 500) => {
    let flag = true
    return (...args) => {
        if (!flag) return;
        flag = false;
        setTimeout(() => {
            fn.apply(this,args);
            flag = true
        }, delay);
    };
}
// ②时间戳实现
export const throttle2 = (fn,delay=500)=>{
    let preTime = Date.now();
    return (...args)=>{
        const nowTime = Date.now();
        if(nowTime - preTime >= delay){
            preTime = Date.now();
            fn.apply(this,args);
        }
    }
}



